<!DOCTYPE html>
<html>
	<head>
		<title>waterfall demo</title>
		<meta charset="utf-8">
		<style type="text/css">
	    	.content{
	    		position: relative;
	    	}

	    	.item{
	    		position: absolute;
	    		width: 200px;
	    		margin-right: 10px;
	    		margin-left: 10px;
	    		transition: all 1s; /*css3特性,让移动的元素有连续动画的效果*/
	    	}

	    	.h1{
	    		height: 200px;
	    		background-color:#f4b300;
	    	}

	    	.h2{
	    		height: 300px;
	    		background-color:#691BB8;
	    	}

	    	.h3{
	    		height: 400px;
	    		background-color:#006ac1;
	    	}

		</style>

		<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
		<script type="text/javascript">
		
		$(function(){

			function render(){
				//定义瀑布块的列数
				var nodeWidth = $('.item').outerWidth(true),
				    colNum = parseInt($(window).width()/nodeWidth),
				    colSumHeight = [];

		        //遍历数组的每个元素,找出有几列元素
			    for (var i = 0; i < colNum; i++) {
			    	colSumHeight.push(0);
			    }

			    $('.item').each(function(){
			    	var $cur = $(this);

			    	var idx = 0,
			    		minSumHeight = colSumHeight[0];

			    	for (var i = 0; i < colSumHeight.length; i++) {
			    		if(colSumHeight[i] < minSumHeight){
			    			idx = i;
			    			minSumHeight = colSumHeight[i];
			    		}
		    		}

			    	$cur.css({
			    		left:nodeWidth*idx,
			    		top:minSumHeight
			    	});
			    	colSumHeight[idx] = $cur.outerHeight(true) + colSumHeight[idx];
		    	});
			}

		    render();
	     	$(window).on('resize', function(){
		 		render();
	 		});

	    });

		</script>
	</head>
	<body>
	    <div class="content">
			<div class="item h1">
			  	1
			</div>
			<div class="item h3">
			  	2
			</div>
			<div class="item h2">
			  	3
			</div>
			<div class="item h1">
				4
			</div>
			<div class="item h1">
				5
			</div>
			<div class="item h3">
				6
			</div>
			<div class="item h3">
				7
			</div>
			<div class="item h2">
				8
			</div>
			<div class="item h1">
				9
			</div>
			<div class="item h3">
				10
			</div>
			<div class="item h3">
				11
			</div>
			<div class="item h3">
				12
			</div>
			<div class="item h2">
				13
			</div>
			<div class="item h1">
				14
			</div>
			
	    </div>
	   
	</body>
</html>
